<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1-canva基本操作</title>
	</head>
	<body>
		<fieldset>
			<legend>
				<h1>1、获得元素</h1>
			</legend>
			<section>
				<p id="oneP" class="one">测试文字！！！</p>
			</section>
			<script>
				console.log("======== 1、获得元素 =======")
				let node = document.querySelector("#oneP")
				console.log("之前",node.classList)
				node.classList.add("tow")
				node.classList.add("three")
				console.log("之后",node.classList)
			</script>
		</fieldset>
		<fieldset>
			<legend>
				<h1>2、Canvas基本用法</h1>
			</legend>
			<section>
				<canvas id="c01">你的浏览器不支持canvas</canvas>
			</section>
			<script>
				console.log("======== 2、Canvas基本用法 =======")
				let canvas = document.querySelector("#c01")
				if(canvas.getContext){
					let ctx = canvas.getContext("2d");
					console.log(ctx)
				}else{
					console.log("没得到 context 2d")
				}
			</script>
		</fieldset>
		<fieldset>
			<legend>
				<h1>3、Canvas绘制矩形</h1>
			</legend>
			<section>
				<canvas id="c03">你的浏览器不支持canvas</canvas>
			</section>
			<script>
				console.log("======== 3、Canvas绘制矩形 =======")
				let canvas3 = document.querySelector("#c03")
				if(canvas.getContext){
					let ctx3 = canvas3.getContext("2d");
					console.log("ctx3",ctx3)
					// ======== 上下文的属性   ========
					// fillStyle   :设置图形的填充颜色。
					ctx3.fillStyle="red"
					
					// strokeStyle :设置图形轮廓的颜色。
					ctx3.strokeStyle="blue"
					
					// lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。
					//	描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。
					//	默认值是1.0。
					ctx3.lineWidth="2"
					
					// 设定线条与线条间接合处的样式（默认是 miter）
					// round : 圆角
					// bevel : 斜角
					// miter : 直角
					ctx3.lineJoin = "round"
					
//					---->绘制一个填充的矩形（填充色默认为黑色）
//						fillRect(x, y, width, height)
					//x	矩形左上角的 x 坐标
					//y	矩形左上角的 y 坐标
					//width	矩形的宽度，以像素计
					//height	矩形的高度，以像素计
					ctx3.fillRect(0,0,50,50);
//					---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
//						strokeRect(x, y, width, height)
//					---->清除指定矩形区域，让清除部分完全透明。	
//						clearRect(x, y, width, height)
					
				}else{
					console.log("没得到 context 2d")
				}
			</script>
		</fieldset>
		<fieldset>
			<legend>
				<h1>4、Canvas绘制路径</h1>
			</legend>
			<section>
				<canvas id="c04">你的浏览器不支持canvas</canvas>
			</section>
			<script>
				console.log("======== 4、Canvas绘制路径 =======")
				let canvas4 = document.querySelector("#c04")
				if(canvas4.getContext){
					let ctx4 = canvas4.getContext("2d");
					console.log("ctx4",ctx4)
					
					ctx4.lineWidth=1
					
//					1.首先，你需要创建路径起始点。
//					2.然后你使用画图命令去画出路径
//					3.之后你把路径封闭。
//					4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
//					ctx4.beginPath();
//					moveTo(x, y)
//						将笔触移动到指定的坐标x以及y上
//						当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点
					ctx4.moveTo(0,0)	
//					lineTo(x, y)
//						将笔触移动到指定的坐标x以及y上
//						绘制一条从当前位置到指定x以及y位置的直线。
					ctx4.lineTo(100,100)
					ctx4.lineTo(100,0)
					ctx4.lineTo(0,0)
					
//					closePath()
//					闭合路径之后图形绘制命令又重新指向到上下文中。
//						闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
//					如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做
//						当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。
//					但是调用stroke()时不会自动闭合
					ctx4.closePath()
					
//					stroke()
//					通过线条来绘制图形轮廓。
//					不会自动调用closePath()
					ctx4.stroke()
					
//					fill()
//					通过填充路径的内容区域生成实心的图形。
//					自动调用closePath()
					ctx4.fill()
					
//					beginPath()
//					新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
//					生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，
//					所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，
//					然后我们就可以重新绘制新的图形。
					ctx4.beginPath() // 清空路径容器，从新开始画
					
					ctx4.fillStyle="red"
					ctx4.strokeStyle="red"
					
					// 重新抬起来画笔
					ctx4.moveTo(0,0)
					ctx4.lineTo(0,100)
					ctx4.lineTo(100,100)
					ctx4.lineTo(0,0)
					
//					ctx4.closePath()
					ctx4.stroke()
					ctx4.fill() // 自动调用closePath()
					
//					lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。
//					有3个可能的值，分别是：
//						butt  :线段末端以方形结束。 
//						round :线段末端以圆形结束
//						square:线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
//					默认值是 butt。
					
				}else{
					console.log("没得到 context 2d")
				}
			</script>
		</fieldset>
		<fieldset>
			<legend>
				<h1>5、Canvas 绘制使用模板</h1>
			</legend>
			<section>
				<canvas id="c05">你的浏览器不支持canvas</canvas>
			</section>
			<script>
				console.log("======== 5、Canvas 绘制使用模板 =======")
				let canvas5 = document.querySelector("#c05")
				if(canvas5.getContext){
					let ctx5 = canvas5.getContext("2d");
					console.log("ctx5",ctx5)
					
					// 使用canvas的时候最好严格按照末班
					
					// 将之前的配置压入栈中（样式容器）
					ctx5.save()
					
					// 配置线样式
					// 配置填充样式
					// ....
					
					// 清空路径容器，从新开始画
					ctx5.beginPath()
					
					// 开始绘制 路径 ... 
					
					// 恢复默认的样式容器（出栈）
					ctx5.restore()
					
					
					
				}else{
					console.log("没得到 context 2d")
				}
			</script>
		</fieldset>
		<fieldset>
			<legend>
				<h1>6、Canvas 画圆</h1>
			</legend>
			<section>
				<canvas id="c06" width="300" height="300">你的浏览器不支持canvas</canvas>
			</section>
			<script>
				console.log("======== 6、Canvas 画圆 =======")
				let canvas6 = document.querySelector("#c06")
				if(canvas6.getContext){
					let ctx6 = canvas6.getContext("2d");
					console.log("ctx6",ctx6)
					
					// 使用canvas的时候最好严格按照末班
					
					// 将之前的配置压入栈中（样式容器）
					ctx6.save()
					
					// 配置线样式
					// 配置填充样式
					// ....
					ctx6.strokeStyle="red" //画笔颜色
					
					// 清空路径容器，从新开始画
					ctx6.beginPath()
					
					// 开始绘制 路径 ... 
					
					ctx6.moveTo(100,100)
					/**
					 * x,y :圆心坐标
					 * radios：半径
					 * b : 起始角度
					 * r : 弧度 角度*Math.Pi/180
					 * b : true 逆时针、false 逆时针 
					 */
					ctx6.arc(100,100,50,0,90*Math.PI/180,true);
					
					ctx6.lineTo(100,100)
					
					ctx6.stroke() // 画线
					ctx6.closePath() // 闭合路径
					
					// 恢复默认的样式容器（出栈）
					ctx6.restore()
					
				}else{
					console.log("没得到 context 2d")
				}
			</script>
		</fieldset>
		
		<fieldset>
			<legend>
				<h1>7、Canvas 画圆弧</h1>
			</legend>
			<section>
				<canvas id="c07" width="300" height="300">你的浏览器不支持canvas</canvas>
			</section>
			<script>
				console.log("======== 7、Canvas 画圆弧 =======")
				let canvas7 = document.querySelector("#c07")
				if(canvas7.getContext){
					let ctx7 = canvas7.getContext("2d");
					console.log("ctx7",ctx7)
					
					ctx7.save()
					ctx7.strokeStyle="black" //画笔颜色
					
					ctx7.beginPath()
					ctx7.moveTo(100,100)
					ctx7.lineTo(300,0)
					ctx7.lineTo(200,200)
					ctx7.stroke()
					ctx7.restore()
					ctx7.closePath() // 闭合路径
					
					ctx7.strokeStyle="red" //画笔颜色
					ctx7.save()
					ctx7.beginPath()
					ctx7.moveTo(100,100); // 第一个点
					/**
					 * x,y：第二个点
					 * x2,y2：第三个点
					 * radios：半径
					 */
					ctx7.arcTo(300,0,200,200,50)
					
					
					ctx7.stroke() // 画线
					ctx7.closePath() // 闭合路径
					// 恢复默认的样式容器（出栈）
					ctx7.restore()
					
				}else{
					console.log("没得到 context 2d")
				}
			</script>
		</fieldset>
		
		<fieldset>
			<legend>
				<h1>8、二次贝塞尔曲线</h1>
			</legend>
			<section>
				<canvas id="c08" width="300" height="300">你的浏览器不支持canvas</canvas>
			</section>
			<script>
				console.log("======== 8、二次贝塞尔曲线 =======")
				let canvas8 = document.querySelector("#c08")
				if(canvas8.getContext){
					let ctx8 = canvas8.getContext("2d");
					console.log("ctx8",ctx8)
					
					ctx8.beginPath();
					ctx8.moveTo(50,50);
					ctx8.lineTo(300,0);
					ctx8.lineTo(200,200);
					ctx8.stroke();
					
					ctx8.beginPath();
					ctx8.moveTo(50,50)
					ctx8.quadraticCurveTo(300,0,200,200);
					ctx8.stroke();
					
				}else{
					console.log("没得到 context 2d")
				}
			</script>
		</fieldset>
		
		<fieldset>
			<legend>
				<h1>9、三次贝塞尔曲线</h1>
			</legend>
			<section>
				<canvas id="c09" width="300" height="300">你的浏览器不支持canvas</canvas>
			</section>
			<script>
				console.log("======== 9、三次贝塞尔曲线 =======")
				let canvas9 = document.querySelector("#c09")
				if(canvas9.getContext){
					let ctx9 = canvas9.getContext("2d");
					console.log("ctx9",ctx9)
					
					ctx9.beginPath();
					ctx9.moveTo(50,50);
					ctx9.lineTo(300,0);
					ctx9.lineTo(0,300);
					ctx9.lineTo(300,300);
					ctx9.stroke();
					
					ctx9.beginPath();
					ctx9.moveTo(50,50)
					ctx9.bezierCurveTo(300,0,0,300,300,300);
					ctx9.stroke();
					
				}else{
					console.log("没得到 context 2d")
				}
			</script>
		</fieldset>
	</body>
</html>
